<template>
  <div>
    <bread-crumb></bread-crumb>
    <el-card class="mt">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-input
            placeholder="请输入订单号或客户名称"
            v-model="params.keyword"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col
          :span="14"
          :offset="4"
          class="operate"
          style="display: flex; justify-content: flex-end"
        >
          <el-button type="primary" @click="visible = true">添加</el-button>
          <el-button :disabled="!select.length">修改</el-button>
          <el-button :disabled="!select.length">删除</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        处理选择变化
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="订单号" fixed="left">
        </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="date" label="下单时间" width="120">
        </el-table-column>
        <el-table-column prop="name" label="客户名称" width="200">
        </el-table-column>
        <el-table-column prop="cargo" label="货物名称"> </el-table-column>
        <el-table-column prop="count" label="件数"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column prop="price" label="运费"> </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deletes(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <orders-modal
      :visible="visible"
      @hide="visible = false"
      @reload="loadData"
    ></orders-modal>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import OrdersModal from "./OrdersModal.vue";
export default {
  components: {
    OrdersModal,
  },
  data() {
    return {
      visible: false,
      tableData: [], //表格数据
      //total: 0,
      params: {
        page: 1,
        pageSize: 50,
        keyword: "",
      },
      select: [], // 存放已选的表项
    };
  },
  // 创建组件时调用loadData
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const res = await post("/orderList", this.params);
      this.tableData = res.data.list;
    },
    // 处理选择表项的方法
    handleSelectionChange(selection) {
      console.log(selection);
      this.select = selection; // 将选择的表项放到数组中
    },
    // operate(type) {
    //   console.log(type);
    // },
    deletes(id) {
      // 弹出对话框确认删除
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定", // 确认按钮的内容
        cancelButtonText: "取消", // 取消按钮的内容
        type: "warning", // 警告类型对话框
      })
        // 点击确定调用
        .then(() => {
          // 发送post请求和id
          post("/orderDelete", { id }).then((res) => {
            console.log(res);
            // 遍历表单数据，找到匹配的数据
            for (let item in this.tableData) {
              if (this.tableData[item].id == id) {
                this.tableData.splice(item, 1);
              }
            }
            // 删除成功弹出消息框
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        // 取消删除弹出消息框
        .catch(() => {
          this.$message({
            type: "warning",
            message: "取消",
          });
        });
      console.log(id);
    },
  },
};
</script>

<style lang="less" scoped></style>
